﻿@model smp.ButterflyCakes.Models.FormModels.Order.CakeTitleModel
<div class="container">
    <div class="container-fluid">
        @if (ViewBag.Error != null)
        {
            <div class="alert alert-block alert-error">
                <p>@ViewBag.Error</p>
            </div>
        }
        @Html.ValidationSummary(true)
    </div>
    <form class="form-horizontal" id="editform" url="/order/savecaketitle">
    @Html.HiddenFor(x => x.OrderId)
    @Html.HiddenFor(x => x.ComponentId)
    @Html.HiddenFor(x => x.IsCarved);
    <div class="control-group">
        <label class="control-label" for="Title">
            Title</label>
        <div class="controls">
            <input class="span4" type="text" id="Title" name="Title" placeholder="Enter a title" value="@Model.Title"/>
            @Html.ValidationMessageFor(x => x.Title)
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="Types">
            Type</label>
        <div class="controls">
            @MvcHtmlString.Create(Model.ComponentTypes.Html)
            @Html.ValidationMessageFor(x => x.Type)
        </div>
    </div>
    <div id="carveContainer" class="control-group hide">
        <div class="controls">
            <label class="radio isCarved">
                <input type="radio" name="IsCarvedRadio" id="IsCarvedRadio" value="false"/>
                Standard Tin Cake
            </label>
            <label class="radio isCarved">
                <input type="radio" name="IsCarvedRadio" id="IsCarvedRadio" value="true"/>
                Custom Cake
            </label>
        </div>
    </div>
    </form>
    <div class="form-actions">
        <button id="save" type="submit" class="btn btn-success">
            Next
        </button>
        <button id="cancel" type="submit" class="btn btn-danger hide">
            Cancel
        </button>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {

        $('.isCarved').click(function () {
            $('#IsCarved').val($(this).find(">:first-child").val());
        });

        $('#Type').change(function () {
            if ($('#Type').val() == "1") {
                $('#carveContainer').slideDown(500);
            } else {
                $('#carveContainer').slideUp(500);
            }
        });

        if ($('#Type').val() == "1") {
            $('#carveContainer').show();
        }
    });
</script>
